<script setup>
import { toRefs, ref, watch } from 'vue';

// props
const props = defineProps({
    style: {
        type: String,
        default: ''
    },
    // 是否dinpro字体
    isDinpro: {
        type: Boolean,
        default: true
    },
    // 是否显示减号
    isShowMinus: {
        type: Boolean,
        default: true
    },
    // 是否显示加号
    isShowPlus: {
        type: Boolean,
        default: false
    },
    // 价格
    price: {
        type: [String, Number],
        required: true,
        default: ''
    },
    // 颜色
    color: {
        type: String,
        default: '#1E2028'
    },
    // 是否划线
    isLineThrough: {
        type: Boolean,
        default: false
    },
    // 是否不保留.00小数
    isSimple: {
        type: Boolean,
        default: true
    },
    // 是否转万
    isWan: {
        type: Boolean,
        default: false
    },
    // 是否显示单位
    isShowUnit: {
        type: Boolean,
        default: true
    },
    // 样式倍数
    multiple: {
        type: Number,
        default: 1
    },
    // 整体大小
    size: {
        type: Number,
        default: 14
    },
    // 单位字体大小
    unitSize: {
        type: Number,
        default: 0
    },
    unitSpace: {
        type: Number,
        default: 0
    },
    // 整数字体大小
    integerSize: {
        type: Number,
        default: 0
    },
    // 小数字体大小
    decimalsSize: {
        type: Number,
        default: 0
    },
    // 万字体大小
    wanSize: {
        type: Number,
        default: 0
    },
    // 万style
    wanStyle: {
        type: String,
        default: ''
    }
});

const newPrice = ref(0);
const integer = ref(0);
const decimal = ref(0);
const toWan = ref(false);

// 处理金额
const handlePrice = () => {
    const { price, isWan } = toRefs(props);
    let toWanTemp = false;
    let priceTemp = Number(price.value);
    if (isWan.value && (priceTemp >= 10000 || priceTemp <= -10000)) {
        priceTemp = priceTemp / 10000;
        toWanTemp = true;
    }
    // 大于1万时不四舍五入，直接舍（全保留.00，Order103版本）
    if (toWanTemp) {
        priceTemp = (Math.floor((priceTemp * 100).toFixed(2)) / 100).toFixed(2);
    } else {
        priceTemp = priceTemp.toFixed(2);
    }
    const [integerTemp, decimalTemp] = priceTemp.split('.');
    newPrice.value = Number(priceTemp);
    integer.value = Math.abs(integerTemp) || 0;
    decimal.value = Number(decimalTemp ? `0.${decimalTemp}` : 0);
    toWan.value = toWanTemp;
};

// 监听价格变化
watch(
    () => props.price,
    () => {
        handlePrice();
    },
    {
        immediate: true,
        deep: true
    }
);
</script>

<template>
    <div
        :class="`c-price ${isDinpro ? 'dinpro-medium' : ''} ${isLineThrough ? 'line-through' : ''}`"
        :style="`color: ${color}; ${style}`"
    >
        <span
            v-if="isShowMinus && newPrice < 0"
            :style="`font-size:${(unitSize || size) * multiple}px;`"
        >
            -
        </span>
        <span
            v-if="isShowPlus && newPrice > 0"
            :style="`font-size:${(unitSize || size) * multiple}px;`"
        >
            +
        </span>
        <span v-if="isShowUnit" :style="`font-size:${(unitSize || size) * multiple}px;margin-right:${unitSpace}px`">¥</span>
        <span :style="`font-size:${(integerSize || size) * multiple}px;`">{{ integer }}</span>
        <span
            v-if="decimal >= 0 && !isSimple"
            :style="`font-size:${(decimalsSize || size) * multiple}px;`"
        >
            {{ decimal.toFixed(2).substring(1, 4) }}
        </span>
        <span
            v-if="decimal >= 0 && isSimple"
            :style="`font-size:${(decimalsSize || size) * multiple}px;`"
        >
            {{ (decimal.toFixed(2) * 1).toString().substring(1, 4) }}
        </span>
        <span v-if="toWan" :style="`font-size:${(wanSize || size) * multiple}px;${wanStyle}`">
            万
        </span>
    </div>
</template>

<style lang="less" scoped>
@import '../../assets/din/index.less';

.c-price {
    display: inline-block;
}

.dinpro-semibold {
    font-family: DIN-PRO-Semibold;
}
.dinpro-medium {
    font-family: DIN-PRO-Medium;
}

// 划线
.line-through {
    text-decoration: line-through;
}
</style>
